//转轮尺寸
$wheel-top:25px;
$wheel-width:100px;

//绳子尺寸
$rope-height:450px;
$rope-width:2px;
$rope-offset:42px;



#home-main{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    column-gap: .625rem;
    padding: .625rem;
}

.home-data{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 10px;
}

.home-hoist{
    --conbot-size:1.25rem;
    
    position: relative;
    background:rgba(16,54,87,0.5);
    border:1px solid #345f92;

    .conbot-1{
        position: absolute;
        left: 0;
        top: 0;
        width: var(--conbot-size);
    }
    .conbot-2{
        position: absolute;
        right: 0;
        top: 0;
        width: var(--conbot-size);
    }
    .conbot-3{
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--conbot-size);
    }
    .conbot-4{
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--conbot-size);
    }
}



//提升机模块整体布局
.well{
    display: flex;
    width: 100%;
    height: 100%;
    > .data{
        width: 70%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #ddd;
        display: table;
        > .data-nav{
            color: white;
            font-size: 20px;
            text-align: center;
        }
        > .data-main{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-column-gap: 5px;
            grid-row-gap: 5px;
            padding: 5px;
        }
    }
    > .hoist{
        width: 30%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }
}

//数据模块样式
$nav-height:1.5625rem;
@mixin  data-style{
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    padding: 5px;
}

//2个数据点的数据模块
.two-data{
    @include data-style;
    grid-template-rows: 1fr 1fr;
    //--nav-width:3.125rem
    >div{
        position: relative;
        display: flex;
        border:1px solid #345f92;
        color: white;
        >nav{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 9rem;
            font-size: 1.5rem;
            font-weight: 300;
        }
        // box-sizing: border-box;
        // border: 1px solid #ddd;
        // >nav{
        //     width: 100%;
        //     height: $nav-height;
        //     line-height: $nav-height;
        //     padding-left: 5px;
        //     font-size: 1rem;
        // }        
        >div{
            width: calc(100% - 7rem);
            display: flex;    
            align-items: center;    
            justify-content: center;
            
            >.d-i-v{
                font-size: 2.7rem; 
                font-family: "elec";
            }
            >.d-i-u{
                margin-left: .625rem;
                font-size: 1.5625rem; 
            }
        }
        
    }
}

//3个数据点的数据模块
.three-data{
    @include data-style;
    grid-template-rows: 1fr 1fr 1fr;
    >div{
        position: relative;
        border:1px solid #345f92;
        display: flex;
        justify-items: center;
        color: white;
        >nav{
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center; 
            font-size: 1.125rem;
            font-weight: 300;
        }
        >div{
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center; 
            >.d-i-v{
                font-size: 1.8rem; 
                font-family: "elec";
            }
            >.d-i-u{
                margin-left: .625rem;
                font-size: 1.3rem; 
            }
        }
    }
}

//4个数据点的数据模块
.four-data{
    @include data-style;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    >div{
        position: relative;
        //box-sizing: border-box;
        border:1px solid #345f92;
        color: white;
        >nav{
            width: 100%;
            height: $nav-height;
            padding-left: 1rem;
            font-size: 1rem;
            font-weight: 300;
        }        
        >div{
            width: 100%;
            height: calc(100% - #{$nav-height});
            display: flex;    
            align-items: center;    
            justify-content: center;
            >.d-i-v{
                font-size: 1.8rem; 
                font-family: "elec";
            }
            >.d-i-u{
                margin-left: .625rem;
                font-size: 1.3rem; 
            }
        }
    }
}

//转轮样式
.wheel{
    position: absolute;
    top: $wheel-top;
    width: $wheel-width;
    left: calc(0.5*(100% - #{$wheel-width}));
    z-index: 2;
    animation: rotes 5s linear infinite;
}

@keyframes rotes {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}

.wheel-img{
    width: 100%;
}

//绳子样式
@mixin rope {  
    position: absolute;
    height: $rope-height;
    width: $rope-width;
    background-color: white;
    z-index: 1;
    top: calc(0.5*#{$wheel-width} + #{$wheel-top});
}

.l-rope{
    @include rope;
    left: calc(0.5*(100% - #{$rope-width}) - #{$rope-offset});
}

.r-rope{
    @include rope;
    right: calc(0.5*(100% - #{$rope-width}) - #{$rope-offset});
}





// 提升机动图部分
$right-offset:6.25rem;
$top-offset:.625rem;
$hoist-w:13.125rem;
$hoist-h:8.75rem;
$ropes-top:$top-offset + $hoist-h;
$ropes-f-length:20rem;
$ropes-f-right:$right-offset+4.375rem;
$ropes-b-length:10rem;
$ropes-b-right:$right-offset+2.5rem;
$ropes-width:2.1875rem;
.hoist-img{
    position: absolute;
    right: $right-offset;
    top: $top-offset;
    width: $hoist-w;
    height: $hoist-h;
}

@mixin ropes{
    position: absolute;
    top: $ropes-top;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: $ropes-width;
    div{
        border-left: 1px solid $rope-color;
    }
    .last-block{
        border-right: 1px solid $rope-color;
    }
}

$rope-color:white;
.ropes-f{
    @include ropes;
    right: $ropes-f-right;
    height: $ropes-f-length;
    z-index: 2;
}

$rope-color:coral;
.ropes-b{
    @include ropes;
    right: $ropes-b-right;
    height: $ropes-b-length;
    z-index: 1;
}

//罐笼样式
//罐笼尺寸
$cage-width:3.125rem;
$cage-height:100px;
@mixin cage {
    width: $cage-width;
    height: $cage-height;
    position: absolute;
    .sub-cage{
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        border: 2px solid $rope-color;
    }
}

$rope-color:white;
.f-cage{
    @include cage;
    top:$ropes-top+$ropes-f-length;
    right:$ropes-f-right - 0.5*($cage-width - $ropes-width);
    z-index: 2;
}

$rope-color:coral;
.b-cage{
    @include cage;
    top:$ropes-top+$ropes-b-length;
    right:$ropes-b-right - 0.5*($cage-width - $ropes-width);
    z-index: 1;
}

.home-lifter-state{
    float: left;
    margin-left: 1.25rem;
    height: 100%;
}

.hls-item{
    margin: 1.25rem 0;
}

